<template>
	<div class="movie" >
		<MovieItem 
				:movie="item" 
				v-for="(item,index) in movieList" 
				:key="index" 
				:data-id="item.id"
				@click="toMovie($event)"
				></MovieItem>
		<div class="more"></div>
	</div>
</template>

<script>
import MovieItem from './MovieItem.vue';
import api from '../config/api.js';

export default {
	components:{
		MovieItem
	},
	data(){
		return {
			movieList:'',
			page: 0
		}
	},
	methods:{
		_getMovieList(){
			var list = localStorage.getItem('list');
			if(list){
				this.movieList = JSON.parse(list).movieList;
			}else{
				this.$axios({
					url: api.movieOnInfoList,
					params:{
						token:''
					}
				}).then(res=>{
						this.movieList = res.data.movieList;
						localStorage.setItem('list',JSON.stringify(res.data));
				})
			}
		},
		_getMoreComingList(){
			var movie = document.querySelector('.movie');
			
			movie.addEventListener('scroll',(e)=>{
				var scrollHeight = e.target.scrollHeight;
				var scrollTop = e.target.scrollTop;
				var clientHeight = e.target.clientHeight;
				var d = scrollHeight - scrollTop === clientHeight;
				
				if(d){
					var list = JSON.parse(localStorage.getItem('list'));
					var arr = list.movieIds.slice(this.page+=12,this.page+12);
					var movieIds = arr.join(',');
					this.$axios({
						url: api.moreComingList,
						params:{
							token:'',
							movieIds:movieIds
						}
					}).then(res=>{
						this.movieList.push(...res.data.coming);
					})
				}
			})
		},
		toMovie(event){
			console.log(event.currentTarget.getAttribute('data-id'));
			console.log(event)
		}
	},
	created() {
		this._getMovieList();
	},
	mounted() {
		this._getMoreComingList();
	}
}
</script>

<style lang="scss" scoped>
.movie{
	width: 100%;
	height: calc(100% - 98px);
	position: absolute;
	overflow: auto;
}
.more{
	height: 48px;
}
</style>
